<template>
  <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
        	<van-image
						round
						fit
						:src="LoginUser.avatar"
					/>
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ info.consignee }} <em>{{ info.mobile }}</em>
          </h3>
          <p>{{ info.address_text }}</p>
        </div>
      </div>

      <!-- 订单商品 -->
      <div class="aui-commodity-bg" style="background: transparent">
        <div
          style="margin-bottom: 10px; background: #f5f5f5"
          v-for="item in info.proinfo"
        >
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <router-link
                :to="{ path: '/product/info', query: { proid: item.proid } }"
              >
                <img :src="item.product.thumbs_text" />
              </router-link>
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
              <p>商品单价：￥{{ item.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ item.total }}</h5>
              <p class="aui-sml-text">X{{ item.pronum }}</p>
            </div>
          </div>

          <div
            style="text-align: right"
            v-if="info.status == '3' && !item.rate"
          >
            <van-button type="primary" size="mini" @click="toPageRate(item.id)">评价 </van-button>
          </div>
        </div>
      </div>

      <!-- 总价 -->
      <div class="aui-cp-edu b-line">
        <div class="aui-flex aui-flex-ed">
          <div class="aui-flex-box" style="color: #333; font-size: 15px">
            订单总价<em style="color: #333">￥{{ info.amount }}</em>
          </div>
        </div>
      </div>

      <div class="divHeight b-line"></div>

      <!-- 订单详细内容 -->
      <div class="aui-flex aui-flex-text-sml b-line orderinfo">
        <div class="aui-flex-box">
          <p>
            <em>订单号:</em>
            {{ info.code }}
          </p>
          <p v-if="info.expresscode">
            <em>配送物流:</em>
            {{ info.express_text }}
          </p>
          <p v-if="info.expresscode">
            <em>物流单号:</em>
            {{ info.expresscode }}
          </p>
          <p>
            <em>下单时间:</em>
            {{ info.createtime }}
          </p>
          <p>
            <em>订单状态:</em>
            {{ info.status_text }}
          </p>
          <p>
            <em>订单描述:</em>
            {{ info.remark }}
          </p>
        </div>
      </div>
    </section>

    <footer class="aui-footer aui-footer-fixed">
      <div
        class="aui-footer-text-info"
        v-if="info.status > '0' && info.status != '4'"
      >
        <a href="javascript:;" class="aui-payment" 	@click="toPage(info.id, '/business/order/refund')">申请退货</a>
      </div>
      <div class="aui-footer-text-info" v-if="info.status == '2'">
        <a href="javascript:;" class="aui-payment" @click="confirmEvent(info.id)">确认收货</a>
      </div>
    </footer>
  </section>
</template>
<script setup>
const route = useRoute();
const router = useRouter();
const { cookies } = useCookies();
const goBack = () => {
  history.back();
};
const orderid = ref(route.query.orderid ?? 0);
const info = ref({});
const LoginUser = reactive(cookies.get("LoginUser"));
onBeforeMount(() => {
  getInfoData();
});
const getInfoData = async () => {
  let result = await Api.business.orderInfo({
    orderid: orderid.value,
    busid: LoginUser.id,
  });
  if (result.code == 1) {
    info.value = result.data;
  }else{
    showFailToast(result.msg);
  }
};
const toPageRate = (id)=>{
  router.push({
    path: '/business/order/rate',
    query:{
      orderproid: id,
      orderid: orderid.value
    }
  })
}
const toPage = (id, url) => {
		router.push({
			path: url,
			query: {
				orderid: id,
			},
		});
	};
	// 确认收货
	const confirmEvent = async (id) => {
		showConfirmDialog({
			title: "确认收货",
			message: "确认是否真的收到商品?",
		})
			.then(async () => {
				let result = await Api.business.orderConfirm({
					busid: LoginUser.id,
					orderid: id,
				});
				if (result.code == 1) {
          getInfoData();
					showSuccessToast(result.msg);
				} else {
					showFailToast(result.msg);
				}
			})
			.catch(() => {});
	};
</script>
<style>
@import url("/assets/css/info.css");
</style>